//我们要实现动态页面  动态模拟购物车 
// 增删改查 
// 读  查 
//  将数据渲染到页面上 


// 写 增删改 
//  所有的写操作 应该是找到对应的数据 进行修改 
//  修改完成 使用最新的数据渲染页面 


// 以下是用户操作的部分?

// 对于购物车 用户会操作全选  

// 每个商品前面的复选框  

// 数量 +  - 

// 删除按钮 

// 清空购物车 

// 去结算  

// 删除所有已经选中 

// 数据联动  

// 总件数  
// 总价格 
// 单个商品的总价 


// 全选是否选中取决于什么?
// 每件商品都选中  全选就勾上  
// 同样,如果全选勾上 下面每件商品都勾上  


// 总件数取决于什么?
//  选中商品的数量的和 

// 总价取决于什么?
//  选中每件商品的(数量乘以单价)的和


// 每件商品的总价
//  每个商品的数量 * 单价  


// 去结算  
// 只要有商品被选中  按钮可以点击  如果任何商品都没被选中
// 该按钮禁用


// 删除已选中 
//  只要有商品被选中  按钮可以点击  如果任何商品都没被选中
// 该按钮禁用


// 用户加入购物车 数据持久化存储  保存到用户自己的浏览器

// localStorage
//      只能存字符串 
//      转成json以后再存  取出转成对象进行写操作 
// 每次 用户操作 
//      删除商品  保存 
//      是否选中商品  保存
//      增加数量     保存 


//      修改后的数据 需要重新渲染到页面上  


// var carList = [
//     {id:111222,status:false,pic:'https://img12.360buyimg.com/n0/s80x80_jfs/t1/138056/29/34511/148571/643a54bfF4ed81ff4/391f9ae88ac3d1f4.jpg.dpg',name:'大号水枪双头喷射高压抽拉式滋水枪户外',pric:67.52,number:3,total:16},
//     {id:333444,status:true,pic:'https://img20.360buyimg.com/n0/s80x80_jfs/t1/61708/7/21542/186039/6309c658E5659f9e1/0ff570b974aa6cc5.jpg.dpg',name:'酷盟卡车神魔幻元珠魔幻对决萌卡蒙卡变形机器人',pric:65.76,number:2,total:9},
//     {id:555666,status:false,pic:'https://img30.360buyimg.com/n0/s80x80_jfs/t1/183665/30/16909/160865/62b00e4aEbf999606/61e1f88f24c76e08.jpg.dpg',name:'水泥搅拌车机玩具男孩混凝土罐车',pric:299.1,number:5,total:23},
//     {id:777888,status:true,pic:'https://img11.360buyimg.com/n0/s80x80_jfs/t1/206142/15/20903/233542/62569cf8E5240b395/5d8d492bde80d6d5.jpg.dpg',name:'暴龙战车X龙装战甲重装坦克磁锋航天飞机',pric:284.0,number:1,total:5}
// ]

var carList = JSON.parse(window.localStorage.getItem('cartlist')) || [
    {id:111222,status:false,pic:'https://img12.360buyimg.com/n0/s80x80_jfs/t1/138056/29/34511/148571/643a54bfF4ed81ff4/391f9ae88ac3d1f4.jpg.dpg',name:'大号水枪双头喷射高压抽拉式滋水枪户外',pric:67.52,number:3,total:16},
    {id:333444,status:true,pic:'https://img20.360buyimg.com/n0/s80x80_jfs/t1/61708/7/21542/186039/6309c658E5659f9e1/0ff570b974aa6cc5.jpg.dpg',name:'酷盟卡车神魔幻元珠魔幻对决萌卡蒙卡变形机器人',pric:65.76,number:2,total:9},
    {id:555666,status:false,pic:'https://img30.360buyimg.com/n0/s80x80_jfs/t1/183665/30/16909/160865/62b00e4aEbf999606/61e1f88f24c76e08.jpg.dpg',name:'水泥搅拌车机玩具男孩混凝土罐车',pric:299.1,number:5,total:23},
    {id:777888,status:false,pic:'https://img11.360buyimg.com/n0/s80x80_jfs/t1/206142/15/20903/233542/62569cf8E5240b395/5d8d492bde80d6d5.jpg.dpg',name:'暴龙战车X龙装战甲重装坦克磁锋航天飞机',pric:284.0,number:9,total:5}
];

var contentBox = document.querySelector('.content')
bindHTML();

function bindHTML(){



    // 总件数  总价格   不能通过渲染得到  
    // 必须通过 计算 
    // 上面两个 又依赖于多少个被选中
    // 多少个被选中的  总件数  总价格   通过数据库数据得到 

    // 先计算一些数据
    //多少个被选中的  总件数  总价格
    var totalSelect=0,totalNum =0,totalPrice=0;
    carList.forEach(function(item){
        if(item.status == true){
            totalSelect++;
            totalNum += item.number;
            totalPrice += item.pric * item.number;

        }
    });

    var str = `<div class="top">
    <input type="checkbox"> 全选
  </div>
  <ul>`;

  carList.forEach(function(item){
       str += `

        <li>
        <div class="status">
          <input type="checkbox" ${item.status === true ? 'checked':""}>
        </div>
        <div class="show">
          <img src="${item.pic}" alt="">
        </div>
        <div class="title">
          ${item.name}
        </div>
        <div class="price">
          ￥ ${item.pric.toFixed(2)}
        </div>
        <div class="number">
          <button>-</button>
          <input type="text" value="1">
          <button>+</button>
        </div>
        <div class="sub">
          ￥ ${(item.pric * item.number).toFixed(2)}
        </div>
        <div class="destory">
          <button>删除</button>
        </div>
      </li>
        `

  });


  str += `
  </ul>
    <div class="bottom">
      <div class="totalNum">
        总件数 : ${totalNum}
      </div>
      <div class="btns">
        <button>清空购物车</button>
        <button>去结算</button>
        <button>删除所有已选中</button>
      </div>
      <div class="totalPrice">
        总价格 : ￥ <span>${totalPrice}</span>
      </div>
    </div> 
  `

  contentBox.innerHTML = str

}

